<template>
    <div>
      <!--<div>
        <el-form ref="MapFormRef" :model="MapForm" :rules="MapRules" class="map_form" label-width="0px">
          <el-form-item prop="country">
            <el-input v-model="MapForm.country" placeholder="请输入国家（英文）">
              <el-button slot="append"  @click="Sure()">确认</el-button>
            </el-input>
            <span id="countryInfo"></span>
          </el-form-item>
        </el-form>
      </div>-->
      <div id="main" style="position:absolute;left:25%;height: 480px;width: 800px"></div>
    </div>
</template>

<script>
  import echarts from 'echarts'
  import 'echarts/map/js/world'
  //导入地图
    export default {
      name: "ditu",
      data()
      {
        return {
          MapForm: {
            country:"chain",
          },
          MapRules: {
            country: [
              {required: true, message: '国家为必填项', trigger: 'blur'},
            ]
          },
        }
      },

      methods: {
        Sure() {
          this.$refs.MapFormRef.validate(async valid => {
            console.log(this.MapForm.country);
          })
        },
      },
      mounted() {
        const myChart = echarts.init(document.getElementById('main'));
        //document.getElementById('main')可以更换为this.$el
        const option = {
          title: {
            text: 'China',
            subtext: 'Data from 互联网',
            sublink: 'http://www.baidu.com',
            left: 'left'
          },
          series: [{
            name: 'china',
            type: 'map',
            map: 'china',
            lable: {
              show: true
            },
            data: []
          }]
        };
        myChart.setOption(option); //渲染
        }
    }
</script>

<style scoped>
</style>
